<!-- 注册 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/img/蛋糕.svg" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>cookie</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <style>
      * {
        margin: 0;
      }
      a {
        text-decoration: none;
      }

      li {
        list-style: none;
      }
      /*导航*/
      .tou {
        position: fixed;
        background: white;
        width: 412px;
        text-align: center;
        height: 66px;
        z-index: 100;
      }
      .yang {
        display: flex;
        height: 100px;
        /* text-align: center; */
        justify-content: center;
        align-items: center;
      }
      .yang img {
        width: 88px;
      }
      .zjt {
        display: flex;
      }
      .zjt img {
        width: 100%;
        height: 188px;
      }
      .dg .item {
        display: inline;
        width: 166px;
        height: 200px;
        float: left;
        margin-right: 15px;
        margin-top: 15px;
        text-align: center;
        background: rgb(245, 245, 245);
        border-radius: 10px;
      }
      .item-list img {
        width: 150px;
        height: 140px;
      }
      .di {
        position: fixed;
        height: 66px;
        width: 100%;
        z-index: 100;
        background: white;
        bottom: 0;
      }
      .di .di_1 {
        display: flex;
        width: 350px;
        justify-content: space-between;
        text-align: center;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div>
        <div class="tou">
          <div class="tou_1"><img src="./img/logo.png" alt="" /></div>
        </div>
        <img src="../img/index1.jpg" width="100%" alt="" />
      </div>

      <div class="yang">
        <div><img src="./img/knifeFork.png" alt="" /></div>
        <div>
          <h3>
            <span>本季</span>
            <span style="font-weight: 200">推荐</span>
          </h3>
          <p style="color: #c7c3c3">Seasonal Recommend</p>
        </div>
      </div>
      <div class="zjt">
        <a href="">
          <img src=" ./img/a.jpg" alt="" />
        </a>
        <a href="">
          <img src="./img/c.jpg" alt="" />
        </a>
      </div>

      <!-- 法式经典 -->
      <div class="yang">
        <div><img src="./img/knifeFork.png" alt="" /></div>
        <div>
          <h3>
            <span>法式</span>
            <span style="font-weight: 200">经典</span>
          </h3>
          <p style="color: #c7c3c3">French Classics</p>
        </div>
      </div>
      <div style="text-align: center">
        <a href="">
          <img style="width: 100%" src="./img/a1.jpg" alt="" />
        </a>
      </div>
      <div class="dg">
        <ul v-for="(d,index) in dg" :key="d.id">
          <div class="item">
            <a href="#">
              <div class="item-list">
                <a :href="'../shangpinxiangxi2.html?id=' +d.id"
                  ><img :src="getImgUrl(d.img)" alt=""
                /></a>
              </div>
              <span v-model="d.name" :value="d.name"
                ><a
                  :href="'../shangpinxiangxi2.html?id=' +d.id"
                  style="color: #000"
                  >{{d.name}}</a
                ></span
              >
            </a>
            <p style="color: #7a7a7a">{{d.english}}</p>
          </div>
        </ul>
      </div>

      <div style="text-align: center">
        <a :href="'../shangpinxiangxi2.html?id=3'">
          <img style="width: 100%" src="./img/77e1e5cbe9c1a05c.jpg" alt="" />
        </a>
      </div>

      <!-- 儿童系列 -->
      <div class="yang">
        <div><img src="./img/knifeFork.png" alt="" /></div>
        <div>
          <h3>
            <span>儿童</span>
            <span style="font-weight: 200">系列</span>
          </h3>
          <p style="color: #c7c3c3">Children Series</p>
        </div>
      </div>
      <div style="text-align: center">
        <a :href="'../shangpinxiangxi2.html?id=2'">
          <img style="width: 100%" src="./img/edda5022a05a8e16.jpg" alt="" />
        </a>
      </div>
      <div class="neirong">
        <div class="biaodan" style="background-image: url(./img/24.jpg)">
          <div style="height: 300px; margin-top: 30px; margin-left: 40px">
            <p>胖达乐园</p>
            <span>Panda Paradise </span>
          </div>
          <span style="margin-left: 40px">
            ￥298.00
            <img
              style="margin-top: 20px; margin-left: 190px; width: 40px"
              src="./img/线性购物车.png"
              alt=""
            />
          </span>
        </div>
        <div class="biaodan" style="background-image: url(./img/25.jpg)">
          <div style="height: 300px; margin-top: 30px; margin-left: 40px">
            <p>可可雪球</p>
            <span>Boule de neige au cacao</span>
          </div>
          <span style="margin-left: 40px">
            ￥48.00
            <img
              style="margin-top: 20px; margin-left: 190px; width: 40px"
              src="./img/线性购物车.png"
              alt=""
            />
          </span>
        </div>
        <div class="biaodan" style="background-image: url(./img/26.jpg)">
          <div style="height: 300px; margin-top: 30px; margin-left: 40px">
            <p>半熟芝士（原味）</p>
            <span>fromage semi-fermente original</span>
          </div>
          <span style="margin-left: 40px">
            ￥48.00
            <img
              style="margin-top: 20px; margin-left: 190px; width: 40px"
              src="./img/线性购物车.png"
              alt=""
            />
          </span>
        </div>
        <div style="width: 1; height: 120px"></div>
        <div class="di">
          <ul class="di_1">
            <li>
              <img src="../img/sy.png" alt="" />
              <p>首页</p>
            </li>
            <a href="../cake2.html">
              <li>
                <img src="../img/fl.png" alt="" />
                <p>分类</p>
              </li>
            </a>
            <a href="../ShoppingCart2.html"
              ><li>
                <img src="../img/gwc.png" alt="" />
                <p>购物车</p>
              </li></a
            >
            <li>
              <img src="../img/my.png" alt="" />
              <p>我的</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          dg: [],
          ds: {},
          d: {
            id: "",
            name: "",
            type_id: "",
            kg: "",
            img: "",
            img2: "",
            img3: "",
            price: "",
            date: "",
            cf_id: "",
            english: "",
          },
        },
        created() {
          this.StuN();
        },
        methods: {
          /**显示*/
          StuN() {
            axios
              .post("http://127.0.0.1:1234/Dg/search", this.d)
              .then((response) => {
                if ((this.d.id = 1)) {
                  this.dg = response.data;
                } else {
                  alert("暂无商品上架！");
                }
                console.log(this.dg);
              });
          },
          getImgUrl(name) {
            return "../image/" + name;
          },
        },
      });

      var index = 0; //定义初始下标
      var banner = document.getElementsByClassName("banner")[0];
      var itemList = document.getElementsByClassName("item");
      var pagenationList = document.querySelectorAll(".pagenation>div");
      var pagenation = document.querySelector(".pagenation");
      itemList[0].style.opacity = 1;
      pagenationList[0].style.background = "blue"; //初始第一张图对应的小圆点的颜色为蓝色
      var up = document.getElementsByClassName("div1")[0];
      var next = document.getElementsByClassName("div2")[0];
      //下一张图片（封装方便下面自动播放定时器调用）
      function nextFn() {
        index = index >= itemList.length - 1 ? 0 : ++index; //判断点击到了最后一张图片再次点击返回到第一张图
        for (var i = 0; i < itemList.length; i++) {
          itemList[i].style.opacity = 0; //图片透明度为0图片隐藏
          pagenationList[i].style.background = "white "; //图片没显现小圆点的颜色为白色
        }
        itemList[index].style.transition = "opacity 1s ease .2s";
        itemList[index].style.opacity = 1; //图片透明度为1图片显现
        pagenationList[index].style.background = "blue"; //图片显现小圆点的颜色为蓝色
      }
      next.onclick = nextFn; //下一张（点击事件）点击切换下一张图片
      up.onclick = function () {
        //上一张（点击事件）点击切换上一张图片
        index = index <= 0 ? itemList.length - 1 : --index; //判断点击到了第一张图片再次点击返回到最后一张图
        for (var i = 0; i < itemList.length; i++) {
          itemList[i].style.opacity = 0;
          pagenationList[i].style.background = "white";
        }
        itemList[index].style.transition = "opacity 1s ease .2s"; //增加过渡效果
        itemList[index].style.opacity = 1;
        pagenationList[index].style.background = "blue";
      };
      //设置定时器，自动向下播放图片
      var t1 = setInterval(nextFn, 1200);
      banner.onmouseover = function () {
        clearInterval(t1);
      };
      banner.onmouseout = function () {
        t1 = setInterval(nextFn, 1500);
      };
      // 事件委托
      pagenation.onclick = function (event) {
        event = window.event || event;
        console.log(event);
        if (event.target.className == "pagenation") {
          console.log("点击的是父元素");
        } else {
          var id = event.target.id;
          var photoIndex = null;
          for (var i = 0; i < pagenationList.length; i++) {
            pagenationList[i].style.background = "white";
            if (id.indexOf(i) >= 0) {
              photoIndex = i;
            }
          }
          event.target.style.background = "blue";
          index = photoIndex; // 将小圆点对应的下标与图片下标对应
          for (var i = 0; i < itemList.length; i++) {
            itemList[i].style.opacity = 0;
          }
          itemList[index].style.transition = "opacity 1s ease .2s";
          itemList[photoIndex].style.opacity = 1;
        }
      };
    </script>
  </body>
</html>
